<template>
	<view>
		<view v-if="isShow" class="time_mask" @click="close" :class="{'uni-timer-mask-show':timeMaskShow}"></view>
		<view v-if="isShow" class="yx_time_slot" :class="{'fadelogIn1':timeMaskShow}">
			<view class="time_top_box">
				<!-- <view class="time_close">{{checkedType}}</view> -->
				<picker mode="date" @change="onDateChange">
					<view class="time_close">
						<text>{{time}}</text>
						<u-icon style="margin-left: 5px;border-radius: 18px;" class="icon-area" name="arrow-down-fill"
							size="20"></u-icon>
					</view>
				</picker>
				<view class="time_text">用时：{{diffHours}}时{{diffMin}}分</view>
				<view class="time_comfirm" @click="close">关闭</view>
			</view>
			<!-- <view class="typelist">
				<view class="typeobj" :class="{'typeobj_hover':typeIndex==index}" v-for="(item,index) in typeList"
					:key="index" @click="handleType(index)">
					<view class="text">{{item}}</view>
					<view class="line"></view>
				</view>
			</view> -->
			<view style="float: left;width: 100%;font-weight: bolder;margin-top: 20rpx;margin-bottom: 10rpx;">
					<view style="width: 44%;float: left;text-align: center;margin-left: 4%;">开始时间</view>
					<view style="width: 44%;float: left;text-align: center;margin-left: 4%;">结束时间</view>
			</view>
			<!-- 时间选择 -->
			<view class="yx_timer_sel">
		
					<picker-view :value="startvalue" :indicator-style="indicatorStyle" @change="bindstartChange"
						class="sel_swiper-item">
						<picker-view-column>
							<view class="item" v-for="(item,index) in timeHour" :key="index">{{item}}时</view>
						</picker-view-column>
						<picker-view-column>
							<view class="item" v-for="(item,index) in timeMin" :key="index">{{item}}分</view>
						</picker-view-column>
					</picker-view>
			
				
					<picker-view :value="endvalue" :indicator-style="indicatorStyle" @change="bindendChange"
						class="sel_swiper-item">
						<picker-view-column>
							<view class="item" v-for="(item,index) in timeHour" :key="index">{{item}}时</view>
						</picker-view-column>
						<picker-view-column>
							<view class="item" v-for="(item,index) in timeMin" :key="index">{{item}}分</view>
						</picker-view-column>
					</picker-view>
				
			</view>
			<view class="add_btn_view">
				<view class="add_btn" @click="goAdd()" v-if="checkedIcon==''">
					<u-icon  class="icon" name="plus"></u-icon>
					<text class="add_btn_text">{{checkedName}}</text>
				</view>
				<view class="add_btn" @click="goAdd()" v-else>
					<image  class="iconClass" :src="checkedIcon"></image>
					<text class="add_btn_text">{{checkedName}}</text>
				</view>
				<view style="float: left;width: 80%;">
					<textarea class="textarea" maxlength="50"  v-model="remark" placeholder="请输入描述"
						placeholder-class="placeholder_style"></textarea>
				</view>
				<view style="float: left;width: 60%;margin-top: 30rpx;margin-left: 20%;">
					<button @click="confirm()" style="border-radius: 30px;background-color:#5A9CFC ;color:white;font-weight: bolder;">保存</button>
				</view>
			</view>
			
		</view>
		
		
		<mypopup title="" :mask="false" v-model="show" height="540px" :showHeader="false"
			style="position: relative;">
			<view
				style="width: 60px;height: 10rpx;background-color: #ccc;position: absolute; top:5px;margin-left: 320rpx;border-radius: 20px;">
			</view>
			
			<view class="popup-content">
				
				
				<view style="float: left;width: 100%;border-radius: 5px;">
					
					<view class="content">
						<view class="nav css-theme" :class="[cueTheme]">
							<!-- 选项卡水平方向滑动，scroll-with-animation是滑动到下一个选项时，有一个延时效果 -->
							<scroll-view class="tab-scroll" scroll-x="true" scroll-with-animation :scroll-left="scrollLeft">
								<view class="tab-scroll_box">
									<!-- 选项卡类别列表 -->
									<view class="tab-scroll_item" v-for=" (item,index) in category" :key="index"
										:class="{'active':isActive==index}" @click="chenked(item)">
										{{item.name}}
									</view>
								</view>
							</scroll-view>
						</view>
					</view>
					
					
					<view  @change="change" :current="isActive" style="height:450px" :autoplay="false"
						circular>
						<view class="swiper_item" >
							<scroll-view style="height:450px;width: 100%;float:left;" class="scroll-view_H"
								scroll-y="true">
								<view style="float: left;width: 100%;">
									<u-grid :col="5" :border="false">
										<u-grid-item v-for=" (item,index) in itemHabitList" :key="index"
											@tap="checkIcon(0,item)" v-if="isActive == 0">
											<view 
												style="background-color:#F3F4F6"
												class="u-grid-item-cls">
												<image class="iconClass" :src="globalUrl+getIcon(item.checkedIcon)"></image>
											</view>
											<view class="grid-text">{{item.name}}</view>
										</u-grid-item>
										
										<u-grid-item v-for=" (item,index) in itemMatterList" :key="index"
											@tap="checkIcon(1,item)" v-if="isActive == 1">
											<view style="background-color:#F3F4F6"	
												class="u-grid-item-cls">
												<image class="iconClass" :src="globalUrl+matterIconUrl"></image>
											</view>
											<view class="grid-text">{{item.title}}</view>
										</u-grid-item>
										
										<u-grid-item v-for=" (item,index) in itemTargetList" :key="index"
											@tap="checkIcon(2,item)" v-if="isActive == 2">
											<view 
												style="background-color:#F3F4F6"
												class="u-grid-item-cls">
												<image class="iconClass" :src="globalUrl+getIcon(item.checkedIcon)"></image>
											</view>
											<view class="grid-text">{{item.name}}</view>
										</u-grid-item>
										<u-grid-item v-for=" (val,index) in itemClassForMeList" :key="index"
											@tap="checkIcon(3,val)" v-if="isActive == 3">
											<view style="background-color:#F3F4F6"
												class="u-grid-item-cls">
												<image class="iconClass" :src="globalUrl+getIcon(val.icon)"></image>
											</view>										
											<view class="grid-text">{{val.name}}</view>
										</u-grid-item>
										<u-grid-item  v-if="isActive == 3" @click="goAddClass()">
											<view style="background-color:#F3F4F6"
												class="u-grid-item-cls">
												<!-- <image class="iconClass" src="/static/add.png"></image> -->
												<text style="text-align: center;line-height: 60px;font-weight: bolder;font-size: 20px;color: #5A9CFC;" class="tn-icon-add iconClass"></text>
											</view>										
											<view class="grid-text">增加</view>
										</u-grid-item>
										<!-- <u-grid-item v-for=" (val,index) in iconList" :key="index"
											@tap="checkIcon(index,val)">
											<view v-if="checkedIcon==val.url"
												:style="'background-color:'+backgroundIndex"
												class="u-grid-item-cls">
												<image class="iconClass" :src="globalUrl+val.url"></image>
												<text class="tn-icon-success-circle-fill iconstyle"></text>
											</view>
											<view v-else style="background-color:#F3F4F6" class="u-grid-item-cls">
												<image class="iconClass" :src="globalUrl+val.url"></image>
											</view>
											<view class="grid-text">{{val.name}}</view>
										</u-grid-item> -->
									</u-grid>
								</view>
							</scroll-view>
						</view>
					</view>
				</view>
				
			</view>
		</mypopup>
	</view>
</template>

<script>
	var _self;
	import mypopup from '@/components/hqs-popup/hqs-popup.vue'
	import icons from '@/common/icon.js'
	import dayjs from '@/dayjs.min.js'
	export default {
		components: {
			mypopup,
		},
		watch: {
			// swiper与上面选项卡联动
			currentindex(newval) {
				this.isActive = newval;
				this.scrollLeft = 0;
				// 滑动swiper后，每个选项距离其父元素最左侧的距离
				for (let i = 0; i < newval - 1; i++) {
					this.scrollLeft += this.category[i].name.length * 14 + 40
				};
			},
		},
		name: "time_slot",
		props: {
			title: {
				type: String,
				default: () => {
					return "选择时间段";
				}
			},
			dataItem: {
				type: Object,
				default() {
					return {}
				}
			},
		},
		data() {
			return {
				globalUrl: getApp().globalData.url,
				time: '',
				type: 0,
				isActive: 0,
				currentindex: 0,
				scrollLeft: 0,
				show: false,
				iconList: [],
				category: [
					{
						id: 0,
						name: '习惯',
					},
					{
						id: 1,
						name: '日程',
					},
					{
						id: 2,
						name: '目标',
					},
					{
						id: 3,
						name: '自定义',
					}
				
				],
				remark:'',
				timeMaskShow: false, //遮罩
				isShow: false, //显示
				typeList: ["开始时间", "结束时间"],
				typeIndex: 0, //下标
				startvalue: [14, 0], //默认下标，14时 00分
				endvalue: [15, 0], //默认下标，15时 00分
				indicatorStyle: 'height: 30px;',
				// timeList:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23],
				timeHour: [],
				timeMin: [], //分钟可选项
				user: [],
				iconCategory:icons.iconCategory,
				checkedId: 0,
				checkedName: "选择活动",
				checkedIcon: '',
				checkedType: '',
				itemHabitList: [],
				itemTargetList: [],
				itemMatterList: [],
				itemClassForMeList: [],
				diffHours:0,
				diffMin:0,
				matterIconUrl:'/profile/upload/2024/08/04/013_我的日程_20240804201746A058.png',
				id:0,
			};
		},
		created() {
			
		},
		mounted() {
			const info = uni.getStorageSync('user');
			this.user = info
			//获取时分
			let timeHour = []
			let timeMin = []
			for (let i = 0; i < 24; i++) {
				timeHour.push(this.formatNumber(i))
			}
			for (let i = 0; i < 60; i++) {
				timeMin.push(this.formatNumber(i))
			}
			this.timeHour = timeHour
			this.timeMin = timeMin
			
			this.getHabitIconList();
			
			
			this.time = dayjs().format('YYYY-MM-DD')
			
	
		
		},
		methods: {
			
			goAddClass(){
				uni.navigateTo({
					url: '/pages/loveTime/addClass?id=0' + "&userId=" + this.user.id
				});
			},
			initData(){
				var _self = this
				
				try {
				  const dataStorage = uni.getStorageSync('loveTime');
				  if (dataStorage) {
					  _self.startvalue = dataStorage.start
					  _self.endvalue = dataStorage.end
				  }
				} catch (e) {
				  console.error('获取缓存失败:', e);
				}
				if(JSON.stringify(_self.dataItem)!="{}"){
					
					// userId: this.user.id,
					// name:this.checkedName,
					// itemId:this.checkedId,
					// itemType:this.checkedType,
					// time:this.time,
					// startTime:this.time +" "+obj.start.hour+":"+obj.start.min+":00",
					// endTime:this.time +" "+obj.end.hour+":"+obj.end.min+":00",
					// // duration:this.diffHours+":"+this.diffMin,
					// remark:this.remark
					_self.id = this.dataItem.id
					_self.checkedIcon = this.globalUrl+this.getIcon(_self.dataItem.type.icon)
					_self.checkedName = _self.dataItem.name
					_self.checkedId = _self.dataItem.itemId
					_self.checkedType = _self.dataItem.itemType
					_self.time = _self.dataItem.time
					_self.startvalue[0]= parseInt(_self.dataItem.startTime.split(" ")[1].split(":")[0])
					_self.startvalue[1]=parseInt(_self.dataItem.startTime.split(" ")[1].split(":")[1])
					_self.endvalue[0]=parseInt(_self.dataItem.endTime.split(" ")[1].split(":")[0])
					_self.endvalue[1]=parseInt(_self.dataItem.endTime.split(" ")[1].split(":")[1])
					// _self.diffHours = _self.dataItem.duration.split(":")[0]
					// _self.diffMin = _self.dataItem.duration.split(":")[1]
					_self.remark = _self.dataItem.remark
					
					console.log(this.dataItem)
					console.log(_self.startvalue[0]+_self.startvalue[1])
					
				}
			},
			onDateChange(event) {
				this.time = event.mp.detail.value;
			},
			//============习惯================
			checkIcon(index, item) {
				if(index == 0){//习惯
					this.checkedIcon = this.globalUrl+this.getIcon(item.checkedIcon)
					this.checkedName = item.name
					this.checkedId = item.id
					this.checkedType = 'habit'
				}else if(index == 1){//日程
					this.checkedIcon = this.globalUrl+this.matterIconUrl
					this.checkedName = item.title
					this.checkedId = item.id
					this.checkedType = 'matter'
				}else if(index == 2){//目标
					this.checkedIcon = this.globalUrl+this.getIcon(item.checkedIcon)
					this.checkedName = item.name
					this.checkedId = item.id
					this.checkedType = 'target'
				}else{//自定义
					this.checkedIcon = this.globalUrl+this.getIcon(item.icon)
					this.checkedName = item.name
					this.checkedId = item.id
					this.checkedType = 'time'
				}
				console.log(this.checkedIcon+"=="+this.checkedId+"=="+this.checkedName)
				this.show = false
			},
			getHabitIconList() {
				var _self = this
				var nums=""
				for(var i=0;i<_self.iconCategory.length;i++){
					var id = _self.iconCategory[i].ids
					if(i==0){
						nums=nums+id
					}else{
						nums=nums+","+id
					}
					
				}
				var data = {
					types: nums,
					
				}
				
				this.$api.listHabitIcon(data).then((res) => {
					var resData = res;
					if (resData.code == "200") {
						
						_self.iconList = resData.data;
						_self.getHabitList()
						
					}
				})
				
			},
			
			getIcon(checkedIconIndex) {
				var _self = this
				var checkedIcon = ""
			
				for (var i = 0; i < _self.iconList.length; i++) {
					if (checkedIconIndex == _self.iconList[i].id) {
						checkedIcon = _self.iconList[i].url
						break;
					}
			
				}
				return checkedIcon;
			},
			getHabitList() {
				var _self = this
				var data = {
					userId: _self.user.id,
				}
				this.$api.countByTypeHabit(data).then((res) => {
					var resData = res;
					if (resData.code == "200") {
						_self.itemHabitList = []
						var arr = []
						var arr2 = arr.concat(resData.data[0],resData.data[1])
						var arr3 = arr2.concat(resData.data[2],resData.data[3])
						_self.itemHabitList = arr3
						
					}
				})
				
			},
			//============事项================
			getMatterList() {
				var _self = this
				var data = {
					userId: _self.user.id
				}
				this.$api.listMatter(data).then((res) => {
					var resData = res;
					if (resData.code == "200") {
						
						console.log("=========listMatter==========")
						console.log(resData)
						_self.itemMatterList = resData.data
					
					}
				})
				
			},
			
			//============目标================
			getTargetList() {
				var _self = this
				var data = {
					userId: _self.user.id,
					status: 0
				}
				this.$api.listTarget(data).then((res) => {
					var resData = res;
					
					if (resData.code == "200") {
						_self.itemTargetList = resData.data;
						console.log("==========listTarget==========")
						console.log(_self.itemTargetList)
					}
				})
			},
			//============自定义================
			getClassForMeList(){
				var _self = this
				var data = {
					userId: _self.user.id,
					category:'time'
				}
				this.$api.listTypeTimeList(data).then((res) => {
					var resData = res;
				
					if (resData.code == "200") {
						_self.itemClassForMeList = resData.data;
						console.log(_self.itemClassForMeList)
			
					}
				})
			},
			// 当前点击子元素靠左留一个选项展示，子元素宽度不相同也可实现
			chenked(item) {
				this.isActive = item.id;
				this.currentindex = this.isActive;
				
				if(item.id == 0){//习惯
					this.getHabitList();
				}else if(item.id == 1){//事项
					this.getMatterList();
				}else if(item.id == 2){//目标
					this.getTargetList();
				}else if(item.id == 3){//自定义
					this.getClassForMeList()
				}
				
			},
			// swiper滑动时，获取其索引，也就是第几个
			change(e) {
				var _self = this
				const {
					current
				} = e.detail;
				this.currentindex = current;
				for(var i=0;i<_self.category.length;i++){
					if(current == _self.category[i].id) {
						_self.getList(_self.category[i].ids)
						break
					}
				}
			},
			
		
			goAdd(){
				
				this.show = true
			},
			//看看是不是有两位数
			formatNumber(n) {
				n = n.toString()
				return n[1] ? n : '0' + n
			},
			//开始选择
			bindstartChange(e) {
				console.log(e)
				this.startvalue = e.detail.value
				this.getTimeResult()
			},
			//结束选择
			bindendChange(e) {
				console.log(e)
				this.endvalue = e.detail.value
				this.getTimeResult()
			},
			
			getTimeResult(){
				var totalMinStart = this.startvalue[0]*60 + this.startvalue[1]
				var totalMinStop = this.endvalue[0]*60 + this.endvalue[1]
				var diff = totalMinStop - totalMinStart
				if(diff>0){
					this.diffHours = Math.floor(diff / 60)
					this.diffMin = diff % 60
				}else{
					this.diffHours = 0
					this.diffMin = 0
				}
			},
			/**
			 * 关闭弹窗
			 */
			close() {
				this.timeMaskShow = false
				this.$nextTick(() => {
					setTimeout(() => {
						this.isShow = false
						this.$emit('close')
					}, 300)
				})
			},
			/**
			 * 确认按钮
			 */
			confirm() {
				var _self = this
				// if(this.typeIndex==0){
				// 	this.endvalue = [this.startvalue[0]+1,0]
				// 	this.typeIndex = 1
				// }else{
				if (this.startvalue[0] < this.endvalue[0] || (this.startvalue[0] == this.endvalue[0] && this.startvalue[
						1] < this.endvalue[1])) {
					var obj = {
						start: {
							hour: this.timeHour[this.startvalue[0]],
							min: this.timeMin[this.startvalue[1]]
						},
						end: {
							hour: this.timeHour[this.endvalue[0]],
							min: this.timeMin[this.endvalue[1]]
						}
					}
					//保存数据
					// var data = {
					// 	userId: this.userId,
					// 	checkedIcon:this.checkedIcon,
					// 	checkedName:this.checkedName,
					// 	checkedId:this.checkedId,
					// 	checkedType:this.checkedType,
					// 	date:this.time,
					// 	startTime:obj.start.hour+":"+obj.start.min,
					// 	endTime:obj.end.hour+":"+obj.end.min,
					// 	duration:this.diffHours+":"+this.diffMin,
					// 	remark:this.remark
					// }
					var data = {}
					
					if(this.checkedId==0 || this.checkedId==''){
						uni.showToast({
							title: '请选择活动',
							duration: 2000,
							icon: 'none'
						})
						return
					}
					if(_self.id>0){
						data = {
							id:this.id,
							userId: this.user.id,
							name:this.checkedName,
							itemId:this.checkedId,
							itemType:this.checkedType,
							time:this.time,
							startTime:this.time +" "+obj.start.hour+":"+obj.start.min+":00",
							endTime:this.time +" "+obj.end.hour+":"+obj.end.min+":00",
							// duration:this.diffHours+":"+this.diffMin,
							remark:this.remark
						}
					}else{
						data = {
							userId: this.user.id,
							name:this.checkedName,
							itemId:this.checkedId,
							itemType:this.checkedType,
							time:this.time,
							startTime:this.time +" "+obj.start.hour+":"+obj.start.min+":00",
							endTime:this.time +" "+obj.end.hour+":"+obj.end.min+":00",
							// duration:this.diffHours+":"+this.diffMin,
							remark:this.remark
						}
						
					}
					
					console.log(data)
					//验证一下是否有交集
					
				
					//验证有问题得提示，没问题执行保存操作
					_self.$api.updateTime(data).then((res) => {
						var resData = res
						if (resData.code == "200") {
							
							_self.startvalue[0]=_self.endvalue[0]
							_self.startvalue[1]=_self.endvalue[1]
							var end1 = 0
							var end2 = 0
							if(_self.startvalue[0]<23){
								end1 = _self.startvalue[0]+1,
								end2 = _self.startvalue[1]
							}else{
								end1 = 23
								end2 = 59
							}
							_self.endvalue[0]= end1
							_self.endvalue[1]= end2
							var dataStorage = {
								start:_self.startvalue,
								end:_self.endvalue
							}
							uni.setStorageSync('loveTime', dataStorage);
							_self.$emit('confirm', obj)
							_self.close()
							//保存之后，更新开始时间和结束时间
							
							
						} else {
							uni.showToast({
								title: resData.msg,
								duration: 2000,
								icon: 'none'
							})
						}
					})
						
					
					
				} else {
					uni.showToast({
						icon: "error",
						title: "结束大于开始"
					})
				}

				// }
			},
			/**
			 * 打开日历弹窗
			 */
			open() {
				this.id = ''
				this.checkedIcon = ''
				this.checkedName = '选择活动'
				this.checkedId = 0
				this.checkedType = ''
				this.startvalue=[14, 0]
				this.endvalue=[15, 0]
				this.diffHours=0
				this.diffMin=0
				this.remark=''
				this.time = dayjs().format('YYYY-MM-DD')
				
				
				this.typeIndex = 0
				this.isShow = true
				this.$nextTick(() => {
					setTimeout(() => {
						this.timeMaskShow = true
						this.initData()
						this.getTimeResult();
						
					}, 50)
				})
			},
			//栏目选择
			handleType(index) {
				if (index != this.typeIndex) {
					if (index == 1) {
						this.endvalue = [this.startvalue[0] + 1, 0]
					}
					this.typeIndex = index
				}
			}

		}
	};
</script>

<style lang="scss" scoped>
	.time_mask {
		position: fixed;
		bottom: 0;
		top: 0;
		left: 0;
		right: 0;
		background-color: $uni-bg-color-mask;
		transition-property: opacity;
		transition-duration: 0.3s;
		opacity: 0;
		/* #ifndef APP-NVUE */
		z-index: 99;
		/* #endif */
	}

	.yx_time_slot {
		background-color: #FFFFFF;
		width: 100%;
		height: 750rpx;
		position: fixed;
		bottom: calc(var(--window-bottom));
		left: 0;
		right: 0;
		z-index: 99;
		transition-property: transform;
		transition-duration: 0.3s;
		transform: translateY(460px);
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		.time_top_box {
			width: 100%;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 16px;

			.time_close {
				width: 200rpx;
				color: #999999;
				font-size: 28rpx;
				font-weight: 400;
				text-align: center;
			}
			.time_comfirm {
				width: 100rpx;
				color: #999999;
				font-size: 28rpx;
				font-weight: 400;
				text-align: center;
			}

			.time_comfirm {
				color: #18B998;
			}

			.time_text {
				flex: 1;
				font-size: 30rpx;
				font-weight: 800;
				text-align: center;
			}
		}
	}

	.uni-timer-mask-show {
		opacity: 1;
	}

	/* 从下往上弹窗动画 */
	.fadelogIn1 {
		// -webkit-animation: fadelogIn 0.5s;
		// animation: fadelogIn 0.5s;
		transform: translateY(0);
	}

	.typelist {
		width: 100%;
		height: 70rpx;
		display: flex;
		align-items: center;

		.typeobj {
			width: 158rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.text {
				height: 65rpx;
				line-height: 65rpx;
				font-size: 28rpx;
				color: #333333;
			}

			.line {
				width: 1rpx;
				height: 5rpx;
			}
		}

		.typeobj_hover {
			.text {
				font-weight: 600;
			}

			.line {
				width: 88rpx;
				transition: width .5s;
				background-color: #18B998;
			}
		}
	}

	.yx_timer_sel {
		width: 100%;
		margin-top: 38rpx;
		
		.sel_swiper {
			// width: 80%;
			// margin: 0 auto;
			height: 300rpx;
			
		}

		.sel_swiper-item {
			height: 300rpx;
			width: 44%;
			margin-left: 4%;
			float: left;
			background-color: #EEF4FF;
			border-radius: 10px;
			// padding: 10px;

			.item {
				height: 30px;
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;
			}
		}
	}
	.add_btn_view{
		float: left;width: 92%;margin-left: 4%;
	}
	
	.add_btn_text{
		width: 100%;
		float: left;
		overflow: hidden;
		text-overflow: ellipsis;
		-ms-text-overflow: ellipsis;
		display: -webkit-box;
		line-clamp: 1;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	.add_btn {
	
		text-align: center;
		width: 18%;
		height: 80px;
		border-radius: 20rpx;
		background-color: #EEF4FF;
		z-index: 100;
		float: left;
		margin-right: 2%;
		
		
	
		
	
		.icon {
			margin-top: 15px;
			margin-bottom: 5px;
			justify-content: center;
			width: 100%;
			color: #18B998;
			font-size: 50rpx;
			/* #ifdef MP-TOUTIAO */
			// 头条小程序 没居中
			text-align: center;
			padding: 15rpx 0;
			/* #endif */
		}
	}
	
	
	.textarea {
		height: 80px;
		border-radius: 8px;
		padding: 10px;
		font-size: 16px;
		width: 100%;
		float: left;
		background-color: #EEF4FF;
		// border: 1px solid #ccc;
	}
	
	.popup-content {
		padding: 60rpx 20rpx;
	}
	
	.iconClass {
		width: 40px;
		height: 40px;
		margin-top: 10px;
	}
	
	.u-grid-item-cls {
	
		width: 60px;
		height: 60px;
		border-radius: 50%;
		line-height: 60px;
		text-align: center;
		font-size: 24px;
		position: relative;
	
	}
	
	
	.iconstyle{
		position: absolute;bottom:-20px;right: -5px;border-radius: 30px;color:$uni-theme-color
	}
	
	
	.content {
		display: flex;
		flex-direction: column;
		width: 100%;
		flex: 1;
		float: left;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		.nav {
			// border-top: 1rpx solid #f2f2f2;
			// position: fixed;
			z-index: 99;
			width: 100%;
			align-items: center;
			// height: 100rpx;
			padding: 20rpx 20rpx;
			.tab-scroll {
				flex: 1;
				overflow: hidden;
	
				.tab-scroll_box {
					display: flex;
					align-items: center;
					flex-wrap: nowrap;
					box-sizing: border-box;
	
					.tab-scroll_item {
						// line-height: 60rpx;
						// margin-right: 35rpx;
						flex-shrink: 0;
						// padding-bottom:10px;
						display: flex;
						justify-content: center;
						// font-size: 16px;
						// padding-top: 10px;
						border-radius: 20rpx;
						// background-color: #ECF1F7;
						padding: 0px 10px;
						font-size: 14px;
						height: 42rpx;
						line-height: 42rpx;
						// color: white;
						margin-right: 10px;
						// color: #000;
					}
				}
			}
		}
	
		.swiper-content {
			padding-top: 90rpx;
			flex: 1;
	
			.swiperitem-content {
				background-color: $page-bg;
	
				.nav_item {
					background-color: $page-bg;
					// padding:20rpx 40rpx 0rpx 40rpx ;
				}
			}
		}
	}
	
	.active {
		position: relative;
		// color: #fff !important;
		// font-weight: 600;
		background-color: #18B998 !important;
		color:white;
		// font-size: 18px !important;
	}
	
	.active::after {
		content: "";
		position: absolute;
		width: 130rpx;
		height: 4rpx;
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: auto;
	}
	.grid-text {
		padding-top: 10px;
		width: 150rpx;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		-ms-text-overflow: ellipsis;
		display: -webkit-box;
		line-clamp: 1;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
</style>